<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .center {
            width: 1400px;
            margin: 0 auto;
        }
        .background{
            background-image: url('http://rvg6mjj7z.hn-bkt.clouddn.com/img/background.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="display: flex; flex-direction: column;">
        <my-header></my-header>
        <div class="background">
            <el-main class="center">
                <el-row gutter="24">


                    <el-col v-for="r in searchArr1" span="6">
                        <el-card class="right-card" style="height: 240px;text-align: center;">
                            <div>
                                <div style="display: flex; align-items: center;">
                                    <img :src="r.imgUrl"
                                         style="border-radius: 50%; width: 60px; height: 60px; margin-right: 20px;">
                                    <h2>{{r.nickname}}</h2>
                                </div>
                                <p>个人介绍</p>
                                <div>
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="flex: 1; text-align: center;">
                                            <p>{{r.articleCountByUser}}</p>
                                            <p>文章</p>
                                        </div>
                                        <div style="flex: 1; text-align: center;">
                                            <p>{{r.videoCountByUser}}</p>
                                            <p>视频</p>
                                        </div>
                                        <div style="flex: 1; text-align: center;">
                                            <p>{{r.likeCountByUser}}</p>
                                            <p>获赞</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>


                        <!--热门文章开始-->
                        <el-card style="margin:10px 0">
                            <h3>热门文章</h3>
                            <el-divider></el-divider>
                            <!--文章列表开始-->
                            <el-row gutter="10" v-for="c in hotArr">
                                <el-col span="10">
                                    <a :href="'/contentDetail.html?id='+c.id">
                                        <img :src="c.imgUrl" width="100%" height="70px">
                                    </a>
                                </el-col>
                                <el-col span="14">
                                    <a style="color: #333;text-decoration: none"
                                       :href="'/contentDetail.html?id='+c.id">
                                        <p class="title_p" style="margin: 0;">{{c.title}}</p>
                                    </a>
                                    <i class="el-icon-time" style="color: #666">{{c.createTime}}</i>

                                </el-col>
                            </el-row>
                            <!--文章列表结束-->
                        </el-card>

                        <!--热门文章结束-->
                    </el-col>

                    <el-col span="18">
                    <el-col v-for="s in searchArr" span="23">

                        <template v-if="s.type == 1">
                            <el-card   >
                                <a style="color: #333;text-decoration: none"
                                   :href="'/contentDetail.html?id='+s.id">
                                    <h2 style="margin-bottom: 30px;">{{s.title}}</h2>
                                </a>
                                <div style="display: flex; align-items: center; margin-top: 20px;">
                                    <el-avatar size="large" :src="s.imgUrl" style="margin-right: 10px;"></el-avatar>
                                    <div>
                                        <h3 style="margin: 0; margin-bottom: 10px;">{{s.nickname}}</h3>
                                        <p style="margin: 0; font-size: 10px;">{{s.createTime}} • 阅读 {{s.viewCount}}</p>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                                <div>
                                    <a style="color: #333;text-decoration: none"
                                       :href="'/contentDetail.html?id='+s.id">
                                        <img :src="s.imgeurl" width="100%" height="100%">
                                    </a>
                                </div>
                            </el-card>
                            <el-card style="background-color: transparent; border: none; height : 8px">
                                <h1>   </h1>
                            </el-card>
                        </template>

                        <template v-else-if="s.type == 2">
                            <el-card >
                                <h2 style="margin-bottom: 30px;">{{s.title}}</h2>
                                <div style="display: flex; align-items: center; margin-top: 20px;">
                                    <el-avatar size="large" :src="s.imgUrl" style="margin-right: 10px;"></el-avatar>
                                    <div>
                                        <h3 style="margin: 0; margin-bottom: 10px;">{{s.nickname}}</h3>
                                        <p style="margin: 0; font-size: 10px;">{{s.createTime}} • 阅读 {{s.viewCount}}</p>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                                <div>
                                    <video style="width: 100%" :src="s.videourl"
                                           controls type="video/mp4">
                                    </video>
                                </div>

                            </el-card>
                            <el-card style="background-color: transparent; border: none;height : 8px">
                                <h1>   </h1>
                            </el-card>
                        </template>






                    </el-col>
                    </el-col>

                    <el-col v-for="t in searchArr1" span="18" style="text-align: center;">
                        <template v-if="(t.articleCountByUser +t.videoCountByUser) == 0">
                            <el-card>
                                <h1 >没有更多了哦</h1>
                            </el-card>

                        </template>
                    </el-col>


                </el-row>
            </el-main>
        </div>

    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                c: {},
                searchArr:[],
                searchArr1:[],
                countByUser:[],
                hotArr: [],
                comment: {content: ""},
                commentsData: [],


            }
        },
        methods: {


        },
        created: function () {
            let userId = new URLSearchParams(location.search).get("userId");
            console.log(userId);
            //发请求获取内容详情，文章，视频，获赞
            axios.get("/v1/contents/" + userId + "/searchUser").then(function (response) {
                if (response.data.code == 1) {
                    v.searchArr1 = response.data.data;
                }
            })

            //发请求获取所有文章和视频
            axios.get("/v1/contents/" + userId + "/searchAll").then(function (response) {
                if (response.data.code == 1) {
                    v.searchArr = response.data.data;

                }
            })


            //发请求获取热门文章
            axios.get("/v1/contents/hot").then(function (response) {
                if (response.data.code == 1) {
                    v.hotArr = response.data.data;
                }
            })


        }
    })
</script>
</html>
